<template>
    <div class="ph-dt-panel">
        <div class="ph-table-panel">
            <ph-button 
            :active="!isDisabled(y)&&month===y"
            @click="$emit('month-change',y)"
            :disabled="isDisabled(y)"
            type="transparent"
            v-for="y in months" :key="y">{{y+1}}{{lang.month}}</ph-button>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, Ref } from 'vue'
import {PhButton} from '../base'
import { date2number } from '../../shared/datetime'
export default defineComponent({
    components:{
        PhButton
    },
    props:{
        lang:{type:Object as PropType<Record<string,unknown>>},
        year:{type:Number,default:0},
        month:{type:Number,default:0}
    },
    setup(props) {
        const start = inject("start") as Ref<Record<string,number>>
        const end = inject("end") as Ref<Record<string,number>>
        const isDisabled = (month:number)=>{
            const s = start.value?date2number([start.value.yyyy,start.value.MM]):false
            const e = end.value?date2number([end.value.yyyy,end.value.MM]):false
            const c = date2number([props.year,month])
            if(s!==false&&e!==false)
                return c<s||c>e
            if(s!==false)
                return c<s
            if(e!==false)
                return c>e
            return false
        }
        const months = computed(()=>{
            const months = []
            for(let i=0;i<12;i++)
                months.push(i)
            return months
        })
        return {months,isDisabled}
    },
})
</script>
